<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="size-12">12</button>
    <button id="size-14">14</button>
    <button id="size-16">16</button>
    <script>
       // 比如函数柯里化，避免频繁的调用具有相同参数值的同时的操作
       function getArea(width){
        return height=>{
            return width*height;
        }
       }

       //函数宽度不变，参数缓存
       let getTenArea = getArea(10);
       let area1 = getTenArea(20);
       let area2 = getTenArea(40);
       console.log(area1,area2);

       //创建私有环境变量的逻辑,私有的函数和方法
       const makeCounter = (function(){
        var privateCounter = 0;

        function changeStep(num){
            privateCounter += num;
        }

        return {
            incr(){
                changeStep(1)
            },
            decr(){
                changeStep(-1)
            },
            val(){
                return privateCounter
            }
        }
       })()

       var Counter1 = makeCounter;
       var Counter2 = makeCounter;

       console.log(Counter1.val());

       Counter1.incr();
       Counter1.incr();
       console.log(Counter1.val());
       Counter1.decr()
       console.log(Counter1.val());
       console.log(Counter2.val());


       //闭包避免使用的对象操作
       function MyObject(name,message){
        this.name = name;
        this.message = message;
       }
       
      
    </script>
</body>

</html>